<template>
    <div>
        <div>{{ total }},{{ v }},{{ nodes }}</div>
        <div id="tree" ref="tree"></div>
    </div>
</template>
  
<script>

import FamilyTree from '@balkangraph/familytree.js';
//  import { familytree } from '../../api/index';

export default {
    name: 'tree',
    data() {
        return {
            nodes: [],
            temp: [],
            total: 0,
            v: "",
        }
    },
  
    methods: {
        mytree: function (domEl, x) {
            this.family = new FamilyTree(domEl, {
                nodes: x,
                nodeBinding: {
                    field_0: "name",
                    img_0: "img"
                }
                
            });
        },
        
        // getNodeList() {
        //   familytree().then(res =>{console.info(res)
        //     this.tableData=res.data.value
        //     })
        // },
        async getNodeList() {
            const res = await this.$http.get("system/apis/familytree");
            console.log(res)
            if (res.code != 20000) {
                this.$message.error("加载家族族谱失败");
            }
            this.total = res.data["total"];
            this.v = res.data.value;
            var count = 0;
            // for(var i in res.data.value)
            for (var i = 0; i < this.total; i++) {
                count++;
                if (count == 1) {

                    var map = { "id": 0, "pids": [], "name": "", "gender": "" ,"img":"","birthday":""};
                    if (res.data.value[i]["Isdel"] == false) {
                        map["id"] = Number(res.data.value[i]["Id"]);
                        map["pids"][0] = Number(res.data.value[i]["Pids"]);
                        // this.map["mid"]=res.data.value[i]["Mid"];
                        // this.map["fid"]=res.data.value[i]["Fid"];
                        map["name"] = res.data.value[i]["Name"];
                        map["gender"] = res.data.value[i]["Gender"];
                        map["birthday"]=res.data.value[i]["Birthday"];
                        map["fno"]=res.data.value[i]["Fno"];
                        map["img"]=res.data.value[i]["Img"];
                        map["is_del"]=res.data.value[i]["Isdel"];
                        map["cdie"]=res.data.value[i]["Cdie"];
                        map["cwedding"]=res.data.value[i]["Cwedding"];
                        this.temp.push(map);
                    }


                }
                else {

                    // eslint-disable-next-line no-redeclare
                    var map = { "id": 0, "pids": [], "mid": 0, "fid": 0, "name": "", "gender": "","img":"","birthday":"" };
                    if (res.data.value[i]["Isdel"] == false) {
                        map["id"] = res.data.value[i]["Id"];
                        map["pids"][0] = res.data.value[i]["Pids"];
                        map["mid"] = res.data.value[i]["Mid"];
                        map["fid"] = res.data.value[i]["Fid"];
                        map["name"] = res.data.value[i]["Name"];
                        map["gender"] = res.data.value[i]["Gender"];
                        map["birthday"]=res.data.value[i]["Birthday"];
                        map["fno"]=res.data.value[i]["Fno"];
                        map["img"]=res.data.value[i]["Img"];
                        map["is_del"]=res.data.value[i]["Isdel"];
                        map["cdie"]=res.data.value[i]["Cdie"];
                        map["cwedding"]=res.data.value[i]["Cwedding"];
                        this.temp.push(map);
                    }


                }
            }

            //this.nodes[0] = this.temp[0]; // 将返回数据赋值
            //this.nodes[1] = this.temp[1]; // 将返回数据赋值
            // eslint-disable-next-line no-redeclare
            console.log(this.temp)
            for (var i = this.total - 1; i >= 0; i--) {
                if (this.temp[i] != null)
                    this.nodes.push(this.temp[i]); // 将返回数据赋值
            }
        }
    },
   async mounted() {
         await this.getNodeList()
        this.mytree(this.$refs.tree, this.nodes)
    }
}
</script>
  <style scoped>
  </style>